<template>
  账号：<input v-model="account" type="text">
    <br>
  密码：<input v-model="password" type="text">
</template>

<script>
export default { // 选项式 API ，默认情况下父组件可以随意访问该子组件的数据和函数等
    data: () => ({
        account: 'Abc31510',
        password: '123321'
    }),
    methods: {
        toLogin() {
            console.log('登录中……');
        }
    },
    expose: ['account', 'toLogin']// 只暴露指定数据、函数等
}
</script>

<script setup>
import {ref} from 'vue' // 组合式 API ，<script setup> 默认是私有的，父组件无法访问组件中的数据及函数

let account = ref('Abc31510')
let password = ref('123321')

function toLogin() {
    console.log('登录中……')
}

defineExpose({ // 将指定数据、函数等暴露出去
    account,
    toLogin
})
</script>